<template>
  <div class="create-page">
      <el-row class="create-page-main-row">
          <!-- <el-col :sm="8" :md="6" :lg="4" :xl="4" class="create-page-select-bar-wrapper hidden-xs-only">
              <div class="placeholder"></div>
              <SelectBar class="create-page-select-bar"
                         @addNewQuestion="addNewQuestion"
              ></SelectBar>
          </el-col> -->
          <el-col :sm="16" :md="16" :lg="24" :xl="24" class="create-page-question-list">
              <MainQuestionList ref="mainQuestionList"></MainQuestionList>
          </el-col>
      </el-row>
  </div>
</template>

<script setup name="InitCreate">
import MainQuestionList from "./MainQuestionList";
const { proxy } = getCurrentInstance();

function addNewQuestion(type) {
  proxy.$refs["mainQuestionList"].addNewQuestion(type);
}
</script>

<style scoped>
  .create-page {
      height: 100%;
      margin: 24px;
  }

  .create-page-main-row {
      height: 100%;
  }

  .create-page-question-list {
      height: 100%;
  }

  .create-page-select-bar {
      position: fixed;
  }

  .placeholder {
      min-width: 250px;
      min-height: 1px;
  }

</style>